import { SetupContext, defineComponent, inject, ref, onMounted } from 'vue';
import { useDesignerComponent } from '../../../designer-canvas/src/composition/function/use-designer-component';
import { DesignerItemContext } from '../../../designer-canvas/src/types';
import { modelProps, ModelProps } from '../gl-scene.props';
// import { useDesignerRules } from './use-designer-rules';
import FGlScene from '../gl-scene.component';
export default defineComponent({
    name: 'FGlSceneDesign',
    props: modelProps,
    emits: [],
    setup(props: ModelProps, context: SetupContext) {
        const elementRef = ref();
        const designItemContext = inject<DesignerItemContext>('design-item-context') as DesignerItemContext;
        const componentInstance = useDesignerComponent(elementRef, designItemContext);

        onMounted(() => {
            elementRef.value.componentInstance = componentInstance;
        });

        context.expose(componentInstance.value);

        return () => {
            return (
                <FGlScene
                    ref={elementRef}
                    class="drag-container"
                    filePath={props.filePath||'http://192.168.3.27:5173/src/assets/models/camera-animate.glb'}
                    dragref={`${designItemContext.schema.id}-container`}
                    id={props.id}
                    width={props.width||800}
                    height={props.height||800}
                    backgroundColor="#FFFFFF"
            
                    ></FGlScene>
            );
        };
    }
});
